import React from 'react'
import './Calculation.scss'
import { connect } from 'react-redux';
import { compose } from 'redux';
import injectReducer from '../../utils/injectReducer';
import { calcIncrease, calcReduce } from './actions';
import reducer from './reducer';

class Calculation extends React.Component {

    _calcIncrease = () => {
        this.props.onCalcIncrease();
    }

    _calcReduce = () => {
        this.props.onCalcReduce();
    }

    render () {
        const {calcResult} = this.props;

        return (
            <div className="calc-box">
                <button className="calc-button" onClick={this._calcIncrease}>+</button>
                <div className="count">count：{calcResult.value}</div>
                <button className="calc-button" onClick={this._calcReduce}>-</button>
            </div>
        )
    }
}

const mapDispathToProps = (dispatch) => {
    return {
        onCalcIncrease: () => dispatch(calcIncrease()),
        onCalcReduce: () => dispatch(calcReduce())
    }
}

const mapStateToProps = (state) => {
    return {
        calcResult: state.calc
    }
}

const withConnect = connect(
    mapStateToProps,
    mapDispathToProps,
)

const withReducer = injectReducer({key: 'calc', reducer});

export default compose(
    withReducer,
    withConnect
)(Calculation);